<template>
  <div class="address-form">
    <div class="address-form-text">
      <nut-textinput
        @input="handleInput"
        placeholder="请填写收货人姓名"
        maxlength="6"
        :clearBtn="false"
        v-model="userName"
        label="联系人"
      />
      <nut-textinput
        @input="handleInput"
        placeholder="请填写手机号码"
        maxlength="11"
        :clearBtn="false"
        v-model="phone"
        label="手机号"
      />
      <div class="select-item">
        <span class="title">
          <label>收获地址</label>
        </span>
        <span class="selected-option" @click="switchActionSheet">
          {{addr?addr:'点击选择'}}
          <i class="iconfont makerarrow-right"></i>
        </span>
      </div>
      <nut-textinput
        @input="handleInput"
        placeholder="例：B座6楼602室"
        maxlength="11"
        :clearBtn="false"
        v-model="addrDetail"
        label="门牌号"
      />
    </div>
    <div class="address-form-text">
      <div class="default-active">
        <span>设为默认地址</span>
        <nut-switch :active="defauleAddr"></nut-switch>
      </div>
    </div>
    <div class="add-btn">
      <nut-button
        :class="[isSaveBtn ? 'nut-button-active' : '']"
        :disabled="!isSaveBtn"
        block
        shape="circle"
        @click="handleSave"
      >保存</nut-button>
    </div>
    <nut-actionsheet :is-visible="isVisible" @close="switchActionSheet" @choose="chooseItem">
      <div slot="custom" class="custom-wrap">
        <span>自定义</span>
        <address-select @cancelAddr="handleCancelAddr" @ensureAdd="handleEnsureAdd" />
      </div>
    </nut-actionsheet>
  </div>
</template>

<script>
import AddressSelect from './AddressSelect';

export default {
  name: 'AddressForm',
  components: { AddressSelect },
  data() {
    return {
      userName: '',
      phone: null,
      addrDetail: null,
      addr: null,
      isVisible: false,
      isSaveBtn: false,
      defauleAddr: false,
    };
  },
  mounted() {
    // this.listenForm();
  },
  methods: {
    switchActionSheet() {
      this.isVisible = !this.isVisible;
    },
    // 取消地址选择
    handleCancelAddr() {
      this.isVisible = false;
    },
    // 确定选择地址信息
    handleEnsureAdd(d) {
      this.addr = d;
      this.handleCancelAddr();
      this.listenForm();
    },
    // 监听输入框是否全部输入
    listenForm() {
      this.isSaveBtn = false;
      if (this.userName && this.phone && this.addrDetail && this.addr) {
        this.isSaveBtn = true;
        return true;
      } else {
        this.isSaveBtn = false;
        return false;
      }
    },
    // 输入框编辑
    handleInput() {
      this.listenForm();
    },
    // 保存
    handleSave() {
      console.log('保存');
    },
    chooseItem() {},
  },
};
</script>

<style scoped lang="scss">
.address-form {
  width: 94vw;
  height: 100%;
  padding: 0 3vw 0;
  overflow: hidden;
  position: relative;
  .address-form-text {
    background-color: #ffffff;
    margin-bottom: 3vw;
    margin-top: 3vh;
    border-radius: 10px;
    padding: 2vh 20px;
    .select-item {
      height: 8vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .selected-option {
        color: #b3b3b3;
      }
    }
    .nut-textinput > .nut-textinput-label {
      font-size: 16px;
      color: #1e1e1e;
    }
    .default-active {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .add-btn {
    position: absolute;
    bottom: 5vh;
    width: 80vw;
    left: 10vw;
    .nut-button {
      background: #dddddd;
    }
    .nut-button-active {
      background: #ff7e00;
    }
  }
}
</style>
<style>
.nut-textinput input {
  border: none !important;
  outline: none;
  text-align: right !important;
  padding: 0 0px 0 10px;
  color: #b3b3b3;
}
.nut-switch.nut-switch-active {
  border-color: green;
}
.nut-switch.nut-switch-active .nut-switch-btn {
  background-color: green;
}
</style>
